<template>
    <div class="info-box">
  
      <div v-for="(item, index) in datass" :key="item.id">
        <div class="top-box">
         
          <div :style="{ backgroundColor: item.bgc }">{{ item.text }}</div>
  
          <div style="margin-left: 5px;">{{ item.type }}·{{ item.describe }}</div>
        </div>
        <div class="bottom-box">
          <div>
            <EnvironmentOutlined />&nbsp;&nbsp;{{ item.pos }}
          </div>
          <div style="font-size: 8px;">{{ item.time }}</div>
        </div>
      </div>
  
    </div>
  </template>
  <script setup >
import {ref,computed, onBeforeMount }from"vue"
import emitter from "../../untils/evebtBus";
import"./info.scss"
import db from"../../data/db"
import { EnvironmentOutlined } from '@ant-design/icons-vue';
onBeforeMount(() => {
  init();
}) 
const obj = {
  1: "一级",
  2: "二级",
  3: "三级",
}

const bgcs = {
  1: "red",
  2: "orange",
  3: "skyblue",
}
const init = () => {
  db.forEach(item => {
    item.text = obj[item.level];
    item.bgc = bgcs[item.level];
  });
}

const state = ref("pending");
emitter.on("changeState", (val) => {
  state.value = val;
})

const type = ref("全部类型");
emitter.on("changeType", (val) => {
  console.log("changeType", val);
  type.value = val;
})

const pos = ref("");
emitter.on("changePos", (val) => {
  pos.value = val;
})



let datass = computed(() => {

 
  const temps = db.filter(item => {

    return (item.state == state.value) && (type.value === "全部类型" ? true : item.type == type.value) && (pos.value === "" ? true : item.pos.includes(pos.value));

  });
  
  return temps;
})







</script>